<template>
  <div class="chat-header">
    <span>Robot</span>
    <ElSelect class="robot-select" :model-value="state.currentRobot" @change="switchRobot">
      <ElOption v-for="_ in state.robots" :key="_.value" :value="_.value" />
    </ElSelect>
    <p class="spring"></p>
    <ElButton :disabled="!state.msgList.length" @click="startNew">开始新对话</ElButton>
  </div>
</template>

<script setup>
import { ElButton, ElSelect, ElOption } from 'element-plus'
import { state, switchRobot, startNew } from '../store'
</script>

<style lang="scss">
.chat-header {
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
  .robot-select {
    width: 80px;
    margin-left: 10px;
  }
}
</style>
